<template>

    <van-tabbar v-model="activeTab" class="app-tab-bar">
      <van-tabbar-item
          class="van-tabbar-item"
          v-for="tab in leftTabs"
          :key="tab.name"
          :name="tab.name"
          :to="{ name: tab.name }"
      >
        <i class="fas" :class="tab.icon"></i>
        <span>{{ tab.title }}</span>
      </van-tabbar-item>

      <div class="fab-placeholder"></div>

      <van-tabbar-item
          class="van-tabbar-item"
          v-for="tab in rightTabs"
          :key="tab.name"
          :name="tab.name"
          :to="{ name: tab.name }"
      >
        <i class="fas" :class="tab.icon"></i>
        <span>{{ tab.title }}</span>
      </van-tabbar-item>
    </van-tabbar>

    <div class="fab-container">
      <div class="publish-btn" @click="handlePostClick">
        <van-icon name="plus" />
      </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';

const activeTab = ref('home');
const route = useRoute();
const router = useRouter();

const tabbarData = [
  { name: 'home', title: '首页', icon: 'fa-home', path: '/home' },
  { name: 'message', title: '消息', icon: 'fa-comment-dots', path: '/message' },
  { name: 'pointMarket', title: '积分商城', icon: 'fa-store', path: '/pointMarket' },
  { name: 'profile', title: '我的', icon: 'fa-user', path: '/profile' },
];

const leftTabs = computed(() => tabbarData.slice(0, 2));
const rightTabs = computed(() => tabbarData.slice(2, 4));

activeTab.value = route.name || 'home';
watch(() => route.name, (newName) => {
  if (tabbarData.some(tab => tab.name === newName)) {
    activeTab.value = newName
  }
}, { immediate: true })

const handlePostClick = () => {
  router.push('/fab');
};
</script>

<style scoped>
.fas {
  display: flex;
  justify-content: space-around;
  align-items: center; /* 确保导航项垂直居中 */
  height: 30px; /* 确保高度与发帖按钮一致 */
  margin: 0px;
  border-radius: 20px;
}

/* 底部导航栏容器样式 */


/* 使用 :deep() 调整 Vant 组件的内部样式 */
/* 导航项激活时，背景颜色和圆角 */
.app-tab-bar :deep(.van-tabbar-item--active) {
  background-color: rgba(58, 123, 255, 0.1);
  border-radius: 20px;
}

/* 非激活状态下的文字和图标颜色 */
.app-tab-bar :deep(.van-tabbar-item__text),
.app-tab-bar :deep(.van-tabbar-item__icon) {
  color: var(--text-light);
  transition: color 0.3s;
}

/* 导航项激活时，文字和图标的颜色 */
.app-tab-bar :deep(.van-tabbar-item--active .van-tabbar-item__text),
.app-tab-bar :deep(.van-tabbar-item--active .van-tabbar-item__icon) {
  color: var(--primary);
}

/* 调整图标和文字大小 */
.app-tab-bar :deep(.van-tabbar-item__text) {
  font-size: 0.85rem;
}

.app-tab-bar :deep(.van-tabbar-item__icon) {
  font-size: 1.4rem;
  margin-bottom: 5px;
}

/* 发帖按钮的占位符 */
.fab-placeholder {
  width: 60px;
  flex-grow: 0;
  flex-shrink: 0;
}

/* 发帖按钮的容器，用于定位 */
.fab-container {
  position: fixed; /* 修改为 absolute */
  bottom: 0px; /* 修改为 0px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001; /* 确保 z-index 高于 TabBar，这样它就不会被覆盖 */
}

/* 发帖按钮本身 */
.publish-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #5a91ff);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -25px;
  box-shadow: 0 6px 16px rgba(58, 123, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.publish-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4px 12px rgba(58, 123, 255, 0.4);
}

.publish-btn .van-icon {
  font-size: 1.8rem;
}
</style>